import { createRouter, createWebHistory } from 'vue-router'

//以路由懒加载的方式 引入对应的组件
// 该方式可以解决 首次加载太慢, 因为首次要加载全局的组件,但是页面中首次显示首页, 
// 那么只需要首次加载首页就可以啦,没必要加载所有的组件,

// 路由懒加载的方式就是当路由访问到哪一个组件, 然后页面才导入哪一个组件, 
// 这样极大的减少了首次加载的时间
export const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/login',
    component: () => import('@/views/Login.vue'),
  },
  {
    path: '/home',
    component: () => import('@/views/Home.vue'),
    meta: {
      label: '首页'
    },
    children: [
      {
        path: 'manage',
        label: '账户管理',
        meta: {
          label: '账户管理'
        },
        name: 'manage',
        component: () => import('@/views/manage/Index.vue'),
        children: [
          {
            path: 'managelist',
            label: '管理员列表',
            name: 'managelist',
            meta: {
              label: '管理员列表'
            },
            component: () => import('@/views/manage/Managelist.vue')
          }
        ]
      },
      {
        path: 'swipermanage',
        label: '轮播图管理',
        meta: {
          label: '轮播图管理'
        },
        name: 'swipermanage',
        component: () => import('@/views/swipermanage/Index.vue'),
        children: [
          {
            path: 'swiperlist',
            label: '轮播图列表',
            name: 'swiperlist',
            meta: {
              label: '轮播图列表'
            },
            component: () => import('@/views/swipermanage/Swiperlist.vue')
          },
          {
            path: 'addswiper',
            label: '添加轮播图',
            name: 'addswiper',
            meta: {
              label: '添加轮播图'
            },
            component: () => import('@/views/swipermanage/Addswiper.vue')
          }
        ]
      },
      {
        path: 'productmanage',
        label: '产品管理',
        meta: {
          label: '产品管理'
        },
        name: 'productmanage',
        component: () => import('@/views/productmanage/Index.vue'),
        children: [
          {
            path: 'productlist',
            label: '产品列表',
            name: 'productlist',
            meta: {
              label: '产品列表'
            },
            component: () => import('@/views/productmanage/Productlist.vue')
          },
          {
            path: 'secondkilllist',
            label: '秒杀列表',
            name: 'secondkilllist',
            meta: {
              label: '秒杀列表'
            },
            component: () => import('@/views/productmanage/Secondkilllist.vue')
          },
          {
            path: 'recomendlist',
            label: '推荐列表',
            name: 'recomendlist',
            meta: {
              label: '推荐列表'
            },
            component: () => import('@/views/productmanage/Recomendlist.vue')
          },
          {
            path: 'filterlist',
            label: '筛选列表',
            name: 'filterlist',
            meta: {
              label: '筛选列表'
            },
            component: () => import('@/views/productmanage/Filterlist.vue')
          }
        ]
      },
      {
        path: 'echartsmanage',
        label: '数据可视化',
        meta: {
          label: '数据可视化'
        },
        name: 'echartsmanage',
        component: () => import('@/views/echartsmanage/Index.vue'),
        children: [
          {
            path: 'echartsshow',
            label: 'Echart数据展示',
            name: 'echartsshow',
            meta: {
              label: 'Echart数据展示'
            },
            component: () => import('@/views/echartsmanage/Echartshow.vue')
          },
          {
            path: 'echartsother',
            label: 'Echart其他数据',
            name: 'echartsother',
            meta: {
              label: 'Echart其他数据'
            },
            component: () => import('@/views/echartsmanage/Echartother.vue')
          }
        ]
      },
      {
        path: 'editor1',
        label: '编辑器',
        meta: {
          label: '编辑器'
        },
        name: 'editor1',
        component: () => import('@/views/editors/Index.vue'),
        children: [
          {
            path: 'editorsubmit1',
            label: '富文本编辑器',
            name: 'editorsubmit1',
            meta: {
              label: '富文本编辑器'
            },
            component: () => import('@/views/editors/Editorsubmit.vue')
          }
        ]
      },
      {
        path: 'map',
        label: '地图',
        meta: {
          label: '地图'
        },
        name: 'editor',
        component: () => import('@/views/map/Index.vue'),
        children: [
          {
            path: 'mapbaidu',
            label: '百度地图',
            name: 'mapbaidu',
            meta: {
              label: '百度地图'
            },
            component: () => import('@/views/map/Mapbaidu.vue')
          }
        ]
      },
      {
        path: 'exportdata',
        label: '数据导出',
        meta: {
          label: '数据导出'
        },
        name: 'exportdata',
        component: () => import('@/views/exportdata/Index.vue'),
        children: [
          {
            path: 'export',
            label: '图表导出',
            name: 'export',
            meta: {
              label: '图表导出'
            },
            component: () => import('@/views/exportdata/Export.vue')
          }
        ]
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes
})

export default router


// 设置路由全局守卫, 对登录状态做校验
router.beforeEach((to, from) => {
  // 01: 获取登录存的本地信息
  let userinfo = JSON.parse(localStorage.getItem('vuex'));
  // console.log('userinfo', userinfo);
  if (to.path == '/login') {
    // 当有本次登录后的存储信息 token存在,说明已登录, 然后跳转到首页
    if (userinfo) {
      // 说明登录过了
      // 提示已登录, 
      ElMessage({
        message: '已登录,无需重复登录',
        type: 'warning',
        duration: 1000,
      })
      //然后重定向到首页
      return { path: '/home' }
    }
    // 如果有userinfo 不用写return, 因为不写默认表示放行,允许正常跳转
  } else {
    // 当本地有token信息, 说明已经登录, 就可以正常页面,否则提示请先登录, 跳转到登录页
    if (!userinfo) {
      ElMessage({
        message: '请先登录',
        type: 'warning',
        duration: 1000,
      })
      //然后重定向到登录页
      return { path: '/login' }
    }
  }

})
